<!DOCTYPE html>
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<link href="./weatherForcastPageResource/custom.css"
	rel="stylesheet" type="text/css">
<link href="./weatherForcastPageResource/weather.css"
	rel="stylesheet" type="text/css">
<!-- <link href="./weatherForcastPageResource/global.css"
	rel="stylesheet" type="text/css"> -->
<link href="./weatherForcastPageResource/city.css"
	rel="stylesheet" type="text/css">
<link href="./index_main.css?randomId=<%=Math.random()%>"
	rel="stylesheet" type="text/css">
<link href="./css/bootstrap.min.css" rel="stylesheet"
	type="text/css">
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="./threefunctionPageResource/threefunction1.js"></script>
<style>
.tab-pane {
	border: 1px solid #eee;
	border-top: none;
}
</style>
<style type="text/css">
body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "微软雅黑";
	font-size: 14px;
}

#l-map {
	height: 70%;
}

#r-result {
	width: 100%;
}

#xx {
	width: 100%;
}

ul {
	float: left;
}

.routePlanButton {
	width: 140px;
	line-height: 38px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px #333;
	border-radius: 5px;
	margin: 20px 20px 20px 0;
	position: relative;
	overflow: hidden;
}

.routePlanButton.gray {
	color: #8c96a0;
	text-shadow: 1px 1px 1px #fff;
	border: 1px solid #dce1e6;
	box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
	background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
	background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
	background: linear-gradient(top, #f2f3f7, #e4e8ec);
}

.navtrans_res_table{
width:100%;
margin-left:4px;
font:12px arial,sans-serif;
border-collapse:collapse cellpadding="0" cellspacing="0" border="0"
}
/* .round-tr{
float: left;
width: 48px;
height: 54px;
background: url(../image/238-gps.png) no-repeat 0px 0px;
}
.arrow-tr{
background-position: -20px -83px;
float: left;
width: 32px;
height: 32px;
background: url(../image/arrow-v.jpg) no-repeat 0px 0px;
} */
</style>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=uTj0rZfVxBUnHBaQnX4ZXulWFynKEpdY"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<script type="text/javascript" src="./jquery-1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-1.9.1/jquery.js"></script>

<script type="text/javascript"
	src="./weatherForcastPageResource/index.js"></script>
<script type="text/javascript"
	src="./weatherForcastPageResource/cityindex.js"></script>
<script type="text/javascript"
	src="./weatherForcastPageResource/chuanyi.js"></script>
<script type="text/javascript" src="../ext4/ext-all.js"></script>
<script type="text/javascript" src="../ext4/ext-lang-zh_CN.js"></script>
<script type="text/javascript"
	src="./index_left.js?randomId=<%=Math.random()%>"></script>
<script type="text/javascript"
	src="./pageDisplayFrame/jBootstrapPage.js"></script>

<script type="text/javascript"
	src="./weatherForcastPageResource/city.js"></script>

<title>关键字输入提示词条</title>
</head>
<body onload="onLoadFunc()">

	<div id="leftDiv">
		<div class="leftContentDiv">
			<!-- <li class=leftContentli style='list-style-type: none'>...</li> -->
		</div>
		<div class="leftBD">
			<button id="routePlanButton" class="routePlanButton gray"
				style="float: right; margin-right: 10px;" onclick="searchClick();">旅游线路规划</button>
		</div>


	</div>

	<div id="middleDiv">
		<div id="l-map" style="width: 100%; height: 60%"></div>
		<div id="r-result" style="margin-top:10px;">
			<font color="blue">请输入需要查询的地理位置信息:</font><input type="text"
				id="suggestId" size="20" value='北京' style="width: 49%;margin-left:10px;"
				onkeyup="if(event.keyCode==13){keyPressSearch();}" />
			<button id="searchButton" type="button" onclick="clickSearch();">搜&nbsp;索</button>
		</div>
		<div id="drive" style="margin-top:10px;">
			<font color="blue">起&nbsp;点:</font><input type="text" id="start"
				size="10" value="中关村一街" style="width: 30%;margin-left:10px;margin-right:10px;" /><font color="blue">终&nbsp;点:</font><input
				type="text" id="end" size="10" value="魏公村" style="width: 30%;margin-left:10px;" />
			<button id="searchButton" type="button" onclick="searchDriving();">搜&nbsp;索</button>
		</div>
		<div id="xx" style="width: 100%; height: 400px; overflow: scroll;"></div>
		<div id="searchResultPanel"
			style="border: 1px solid #C0C0C0; width: 150px; height: auto; display: none;"></div>
	</div>

	<div id="rightDiv">

		<div class="box_hd"
			style="position: relative; width: 100%; height: 20%; top: 0%; border: 2px; border-color: GRAY; border-style: solid; left: 0px; float: left">
			<div class="box_hddivTop" id="myTop01">
				<ul>
					<li class="hover" id="currentCity"></li>
					<li id="currentCityTips"></li>
					<li id="futureWeather"></li>
				</ul>
			</div>

			<div class="box_hddivCont" id="myCont01">
				<!-- 天气预报 -->
				<div class="w_box_bg">
					<div class="w_bg" style="height: 130px; width: 100%;">
						<div class="today_data">
							<div class="today_data_w">
								<div class="tqshow" id="today"
									style="margin-left: 10px; font-size: 12px; line-height: 15px;">
									<ul
										style="padding-left: 10px; margin-top: 0px; margin-bottom: 0px; padding-right: 15px;">
										<li class="time" id="todayDate"></li>
										<li class="tqpng_01"><img class="pngtqico"
											id="todayWeatherImage" align="absmiddle" src=""
											style="border: 0; width: 35px; height: 35px; padding: 0px;"></li>
										<li class="fon14 fB"><span id="todayTemp"></span></li>
										<li class="cDRed" id=todayWeather></li>
										<li class="cDWind" float=left id="todayWind"></li>

									</ul>
								</div>
							</div>
							<div class="today_data_detail"
								style="margin-left: 20px; width: 65%; padding-right: 0px; padding-left: 10px; padding-right: 20px; padding-top: 10px; font-size: 13px; text-align: left;">

								<font color="green"><strong>今日天气详情</strong></font> <br />
								<!-- 今日天气详情 -->
								<div id="todayDetail" class="commFont"></div>
							</div>

						</div>
					</div>
				</div>

				<!-- 生活指数 -->
				<div class="w_box_bg">
					<div class="w_box_sh"
						style="padding-left: 5px; padding-top: 0px; padding-bottom: 0px; height: 130px; width: 100%;">
						<div class="mod_item1">
							<img src="./weatherForcastPageResource/ziwaixian.png"
								style="width: 55px; margin-right: 0px; margin-top: 15px;">
							<dl>
								<dt>
									<span style="color: green" id="ultravioletDegree"></span>
								</dt>
								<dd id="ultravioletDes" style="margin-left: 0px;"></dd>
							</dl>
						</div>

						<div class="mod_item">
							<img src="./weatherForcastPageResource/sh_ly.png"
								style="width: 55px; margin-right: 0px; margin-top: 15px;">
							<dl>
								<dt>
									<span style="color: green" id="travelDegree"></span>
								</dt>
								<dd id="travelDes" style="margin-left: 0px;"></dd>
							</dl>
						</div>
					</div>
				</div>

				<!-- 将未来几天天气单独做成一个导航页 -->
				<div class="w_box_bg">

					<div class="w_bg"
						style="padding-left: 5px; padding-top: 0px; padding-bottom: 0px; height: 130px; width: 100%;">
						<div class="today_data_m"
							style="background-color: #F0FAFF; width: 100%; height: 100%;">
							<ul>
								<li class="time" id="date1"></li>
								<li class="tqpng_01"><img class="pngtqico"
									id="weatherImage1" align="absmiddle" src=""
									style="border: 0; width: 46px; height: 46px"></li>
								<li class="fon14 fB"><span id="temp1"></span></li>
								<li class="cDRed" id="weather1"></li>
								<li class="cDWind" float=left id="wind1"></li>

							</ul>

							<ul>
								<li class="time" id="date2"></li>
								<li class="tqpng_01"><img class="pngtqico"
									id="weatherImage2" align="absmiddle" src=""
									style="border: 0; width: 46px; height: 46px"></li>
								<li class="fon14 fB"><span id="temp2"></span></li>
								<li class="cDRed" id="weather2"></li>
								<li class="cDWind" float=left id="wind2"></li>

							</ul>

							<ul>
								<li class="time" id="date3"></li>
								<li class="tqpng_01"><img class="pngtqico"
									id="weatherImage3" align="absmiddle" src=""
									style="border: 0; width: 46px; height: 46px"></li>
								<li class="fon14 fB"><span id="temp3"></span></li>
								<li class="cDRed" id="weather3"></li>
								<li class="cDWind" float=left id="wind3"></li>

							</ul>


						</div>

					</div>
				</div>

			</div>
		</div>
		<!-- end box_hd -->

		<!-- 构造一个组件显示内容，响应点击事件 -->
		<!-- 折叠标签 -->
		<!-- 			   <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript"  src=".././threefunctionPageResource/threefunction1.js"></script>
    	    <style>
      .tab-pane {    
            border: 1px solid #eee;
            border-top: none;
        }
    </style> -->
		<div class="threefunction"
			style="overflow: auto; position: relative; width: 100%; height: 98%; border: 0px; border-color: GRAY; border-style: thin; right: 0px; float: right">


			<ul id="myTab" class="nav nav-tabs">
				<li class="active"><a href="#home" data-toggle="tab" onclick="getNearPoi('pageIndex','景点',2000);getNearPoiData('景点',2000);"> 景点 </a></li>
				<li><a href="#ios" data-toggle="tab" onclick="getNearPoi('pageIndex1','美食',1000);getNearPoiData('美食',1000);">餐饮</a></li>
				<li class="dropdown"><a href="#java" data-toggle="tab" onclick="getNearPoi('pageIndex2','酒店',1000);getNearPoiData('酒店',1000);");'>住宿 </a>
				</li>
			</ul>
			<div id="myTabContent" class="tab-content">
				<div class="tab-pane fade in active" id="home">
					<div id="pageIndex"
						style="position: absolute; width: 100%; height: 80%; top: 40px; border: 1px; border-color: GRAY; border-style: thin; right: 0px; float: right">
						<!-- <ol id="pageIndexOl"
							style="list-style: none; padding: 0px; margin: 0px;">


						</ol>
						<div>
							<ul id="pageination" class="pageination"
								style="float: none; display: inline-flex; list-style-type: none;"></ul>
						</div> -->
					</div>
				</div>
				<div class="tab-pane fade" id="ios">
					<div id="pageIndex1"
						style="position: absolute; width: 100%; height: 80%; top: 40px; border: 1px; border-color: GRAY; border-style: thin; right: 0px; float: right">
						<!-- <ol id="pageIndexOl1"
							style="list-style: none; padding: 0px; margin: 0px;">


						</ol>
						<div>
							<ul id="pageination1" class="pageination1"
								style="float: none; display: inline-flex; list-style-type: none;"></ul>
						</div> -->
					</div>
				</div>
				<div class="tab-pane fade" id="java">
					<div id="pageIndex2"
						style="position: absolute; width: 100%; height: 80%; top: 40px; border: 1px; border-color: GRAY; border-style: thin; right: 0px; float: right">
						<!-- <ol id="pageIndexOl2"
							style="list-style: none; padding: 0px; margin: 0px;">


						</ol>
						<div>
							<ul id="pageination2" class="pageination2"
								style="float: none; display: inline-flex; list-style-type: none;"></ul>
						</div> -->
					</div>
				</div>
			</div>
		</div>
	</div>
	
</body>
</html>

